<div id="capitalInfo<?php echo $uniqid;?>" class="capital_info">
    <el-container>
        <el-main>
            <div class="section order">
                <h2>店铺订单金额</h2>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-card>
                            <div class="icon">
                                <img src="/static/images/merchant/capital/ico_1.png" />
                            </div>
                            <div class="ct">
                                <h3> 订单总金额(元)
                                    <el-tooltip effect="dark" content="订单结算完成的实际入账金额" placement="top">
                                        <i class="el-icon-question" style="font-size: 14px; color: #939799;"></i>
                                    </el-tooltip>
                                </h3>
                                <p>{{orderMoneyDetail.total_money}}</p>
                                <p>订单数量：{{orderMoneyDetail.order_numbers}}单</p>
                            </div>
                            <div class="opt">
                                <button type="button" class="ivu-btn" @click="showOrder">
                                    <span>查看明细</span>
                                </button>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <div class="icon">
                                <img src="/static/images/merchant/capital/ico_2.png" />
                            </div>
                            <div class="ct">
                                <h3> 商品退款金额(元)
                                    <el-tooltip effect="dark" content="订单商品产生退款的总金额" placement="top">
                                        <i class="el-icon-question" style="font-size: 14px; color: #939799;"></i>
                                    </el-tooltip>
                                </h3>
                                <p>{{orderMoneyDetail.refund_total_money}}</p>
                                <p>订单数量：{{orderMoneyDetail.refund_order_numbers}}单</p>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <div class="icon">
                                <img src="/static/images/merchant/capital/ico_3.png" />
                            </div>
                            <div class="ct">
                                <h3> 平台抽成金额(元)
                                    <el-tooltip effect="dark" content="平台按比例/固定抽取的抽成金额" placement="top">
                                        <i class="el-icon-question" style="font-size: 14px; color: #939799;"></i>
                                    </el-tooltip>
                                </h3>
                                <p>{{orderMoneyDetail.platform_cut_total_money}}</p>
                                <p>订单数量：{{orderMoneyDetail.platform_cut_order_numbers}}单</p>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div class="section capital">
                <h2>资产结算</h2>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="ketixian">
                            <div class="icon">
                                <img src="/static/images/merchant/capital/ico_4.png" />
                            </div>
                            <div class="ct" style="width: calc(100% - 100px);">
                                <h3> 可提现金额(元)
                                    <el-tooltip effect="dark" content="实际到账可提现金额" placement="top">
                                        <i class="el-icon-question" style="font-size: 14px; color: #939799;"></i>
                                    </el-tooltip>
                                </h3>
                                <p>{{merchantCapitalDetail.money}}</p>
                                <p></p>
                            </div>
                            <div class="opt">
                                <button @click="withdrawApply" type="button" class="ivu-btn" style="background-color: #2D8CF0; color: #ffffff; margin-left: 96px; margin-right: 20px;">
                                    <span>提现</span>
                                </button>
                                <button type="button" class="ivu-btn" @click="withdrawLog">
                                    <span>提现记录</span>
                                </button>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <div class="icon">
                                <img src="/static/images/merchant/capital/ico_5.png" />
                            </div>
                            <div class="ct">
                                <h3> 待结算金额(元)
                                    <el-tooltip effect="dark" content="未到结算期发生的订单金额" placement="top">
                                        <i class="el-icon-question" style="font-size: 14px; color: #939799;"></i>
                                    </el-tooltip>
                                </h3>
                                <p>{{merchantCapitalDetail.money_freeze}}</p>
                                <p></p>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <div class="icon">
                                <img src="/static/images/merchant/capital/ico_6.png" />
                            </div>
                            <div class="ct">
                                <h3> 提现审核金额(元)
                                    <el-tooltip effect="dark" content="商户提现中的冻结金额" placement="top">
                                        <i class="el-icon-question" style="font-size: 14px; color: #939799;"></i>
                                    </el-tooltip>
                                </h3>
                                <p>{{merchantCapitalDetail.withdraw_money_freeze}}</p>
                                <p></p>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <div class="icon">
                                <img src="/static/images/merchant/capital/ico_7.png" />
                            </div>
                            <div class="ct">
                                <h3> 已提现金额(元)
                                    <el-tooltip effect="dark" content="商户已成功提现总金额" placement="top">
                                        <i class="el-icon-question" style="font-size: 14px; color: #939799;"></i>
                                    </el-tooltip>
                                </h3>
                                <p>{{merchantCapitalDetail.withdraw_money}}</p>
                                <p></p>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-main>
    </el-container>
</div>
<div id="MerchantCapitalDlg" class="easyui-dialog" style="width:700px; height:580px;" title="信息框" closed="true"></div>
<script>
    var capitalInfoVm = new Vue({
        el: '#capitalInfo<?php echo $uniqid;?>',
        data: {
            orderMoneyDetail: JSON.parse('<?php echo addslashes($order_money_detail);?>'),
            merchantCapitalDetail: JSON.parse('<?php echo addslashes($merchant_capital_detail);?>'),
        },
        methods: {
            showOrder:function () {
                addTab('订单管理','/merchant/order/index');
            },
            withdrawLog: function () {
                addTab('我的提现','/merchant/withdraw/index');
            },
            withdrawApply: function () {
                $("#MerchantCapitalDlg").dialog({
                    title: `申请提现`,
                    closed: false,
                    width: 840,
                    height: 450,
                    cache: false,
                    href: `/merchant/withdraw/apply`,
                    modal: true,
                    buttons: [{
                        text: '保存',
                        id: 'applyWithdrawSubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#MerchantCapitalDlg").dialog('close');
                        }
                    }]
                });
            }
        }
    });
</script>
<style>
    .capital_info .el-main {
        padding: 0 10px 0 0;
    }

    .capital_info .section {
        margin: 20px auto;
        padding: 20px;
        background-color: #f7f7f7;
        border-radius: 10px;
    }

    .capital_info .section h2 {
        font-size: 16px;
        padding-bottom: 20px;
        color: #333333;
    }

    .capital_info .section .el-card {
        min-height: 218px;
        border-color: #E9EDEF;
    }

    .capital_info .section .el-card .el-card__body {
        display: flex;
        align-items: center;
        padding: 55px 30px;
    }

    .capital_info .section.order .el-card {
        background: linear-gradient(180deg, #FFFBF7 0%, #fff 100%);
    }

    .capital_info .section.capital .el-card {
        background: linear-gradient(180deg, #F7F8FF 0%, #fff 100%)
    }

    .capital_info .section .el-card .icon img{
        width: 42px;
    }

    .capital_info .section .el-card .icon{
        display: flex;
        background: rgba(255,153,0,0.1);
        cursor: pointer;
        margin-right: 30px;
        width: 66px;
        height: 66px;
        border-radius: 66px;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-shrink: 0;
    }

    .capital_info .section.order .el-card .icon i{
        color: #f90;
    }

    .capital_info .section.capital .el-card .icon{
        background: rgba(45,140,240,0.1);
    }

    .capital_info .section.capital .el-card .icon i{
        color: #39A7F1;
    }

    .capital_info .section .el-card .ct h3{
        font-weight: normal;
        font-size: 14px;
        line-height: 20px;
        color: #636669;
    }

    .capital_info .section .el-card .ct p{
        color: #262B30;
        font-weight: 600;
        font-size: 26px;
        line-height: 56px;
    }

    .capital_info .section .el-card .ct p:last-child{
        font-size: 14px;
        line-height: 20px;
        color: #939799;
        font-weight: normal;
    }

    .capital_info .section .el-card .opt{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: right;
    }

    .capital_info .section .el-card .opt .ivu-btn{
        border: 1px solid #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 2px;
        font-size: 14px;
        line-height: 20px;
        width: 100px;
        padding: 5px 0px;
        color: #515a6e;
        background-color: transparent;
        cursor: pointer;
    }

    .capital_info .section.order .el-card .opt .ivu-btn{
        border-color: #f90;
        color: #f90;
    }
    .capital_info .section.capital .el-card .opt .ivu-btn{
        border-color: #197BE1;
        color: #197BE1;
    }

    .capital_info .section.capital .el-card.ketixian .el-card__body{
        flex-wrap: wrap;
    }

    .capital_info .section.capital .el-card.ketixian .opt{
        text-align: left;
    }
</style>